import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select, Rate } from 'antd';
import { CopyOutlined, DownloadOutlined } from '@ant-design/icons';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title } = Typography;
const { TextArea } = Input;

export default function CommentCommodity() {
  const [form] = Form.useForm();
  const [isGenerating, setIsGenerating] = useState<boolean>(false);
  const [generatedContent, setGeneratedContent] = useState<string>('');
  const [tourVisible, setTourVisible] = useState(false);

  // 使用HTML元素的ref引用方式
  const productNameRef = useRef<HTMLDivElement>(null);
  const productTypeRef = useRef<HTMLDivElement>(null);
  const ratingRef = useRef<HTMLDivElement>(null);
  const styleRef = useRef<HTMLDivElement>(null);
  const generateButtonRef = useRef<HTMLDivElement>(null);
  const resultRef = useRef<HTMLDivElement>(null);

  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 定义steps配置
  const tourSteps = [
    {
      key: 'productName',
      title: '输入产品名称',
      description: '请输入您想要生成评价的产品名称',
    },
    {
      key: 'productType',
      title: '选择产品类型',
      description: '选择产品的类型，以便生成更符合产品特性的评价',
    },
    {
      key: 'rating',
      title: '设置星级评分',
      description: '选择您对产品的满意程度，最高5星',
    },
    {
      key: 'style',
      title: '选择评价风格',
      description: '选择您想要的评价风格，包括真实客观、热情推荐或简洁明了',
    },
    {
      key: 'generateButton',
      title: '生成商品评价',
      description: '完成所有设置后，点击此按钮生成商品评价',
    },
    {
      key: 'result',
      title: '查看生成结果',
      description: '生成成功后，您可以在此处查看、复制或下载生成的评价内容',
    },
  ];

  // 组织ref引用
  const tourRefs = {
    productName: productNameRef,
    productType: productTypeRef,
    rating: ratingRef,
    style: styleRef,
    generateButton: generateButtonRef,
    result: resultRef,
  };

  // 生成商品评价的模拟函数
  const generateContent = (
    productName: string,
    productType: string,
    rating: number,
    purchaseExperience: string,
    pros: string,
    cons: string,
    usageScenario: string,
    style: string
  ): string => {
    // 这里是模拟生成内容的逻辑，实际应用中应该调用AI模型
    let result = '';

    // 评价标题
    const titles = [
      `${productName}真的太棒了！`,
      `${productName}使用体验分享`,
      `${productName}值得购买吗？真实测评告诉你`,
      `入手${productName}后的真实感受`,
      `${productName}优缺点分析`,
      `${productName}给我的生活带来了哪些改变`
    ];
    const randomTitle = titles[Math.floor(Math.random() * titles.length)];
    result += `【评价标题】\n${randomTitle}\n\n`;

    // 星级评分
    result += `【星级评分】\n`;
    let stars = '';
    for (let i = 0; i < Math.floor(rating); i++) {
      stars += '⭐';
    }
    if (rating % 1 !== 0) {
      stars += '½';
    }
    result += `${stars} ${rating}/5 分\n\n`;

    // 购买体验
    result += `【购买体验】\n`;
    if (purchaseExperience) {
      result += purchaseExperience + '\n';
    } else {
      if (style === '真实客观') {
        result += `下单后很快就收到了商品，包装${Math.random() > 0.5 ? '完好无损' : '精美'}，物流速度${Math.random() > 0.5 ? '非常快' : '比预期的要快'}。客服态度${Math.random() > 0.5 ? '热情' : '很好'}，有问必答，购物体验很愉快。\n`;
      } else if (style === '热情推荐') {
        result += `不得不说，这次购物体验真的超棒！卖家发货${Math.random() > 0.5 ? '速度超快' : '很及时'}，包装也${Math.random() > 0.5 ? '很用心' : '很精美'}，收到货的那一刻我就知道没买错！\n`;
      } else if (style === '简洁明了') {
        result += `物流快，包装好，购物体验不错。\n`;
      }
    }

    // 商品外观
    result += `\n【商品外观】\n`;
    if (productType.includes('手机') || productType.includes('数码')) {
      result += `${productName}的外观${Math.random() > 0.5 ? '设计时尚' : '简约大方'}，颜色${Math.random() > 0.5 ? '很正' : '很耐看'}，做工${Math.random() > 0.5 ? '精细' : '扎实'}，拿在手里${Math.random() > 0.5 ? '质感很好' : '很舒服'}。\n`;
    } else if (productType.includes('服装') || productType.includes('鞋包')) {
      result += `${productName}的款式${Math.random() > 0.5 ? '时尚百搭' : '很有设计感'}，面料${Math.random() > 0.5 ? '柔软舒适' : '质感很好'}，做工${Math.random() > 0.5 ? '精细' : '工整'}，没有多余的线头。\n`;
    } else if (productType.includes('美妆') || productType.includes('护肤')) {
      result += `${productName}的包装${Math.random() > 0.5 ? '简约大方' : '精美奢华'}，产品本身${Math.random() > 0.5 ? '质地细腻' : '很容易推开'}，气味${Math.random() > 0.5 ? '淡雅好闻' : '很舒服'}。\n`;
    } else {
      result += `${productName}的外观${Math.random() > 0.5 ? '简洁实用' : '美观大方'}，材质${Math.random() > 0.5 ? '优质' : '耐用'}，做工${Math.random() > 0.5 ? '精细' : '可靠'}。\n`;
    }

    // 使用感受
    result += `\n【使用感受】\n`;
    if (style === '真实客观') {
      result += `使用了一段时间后，感觉${productName}的${Math.random() > 0.5 ? '性能' : '质量'}${rating >= 4 ? '非常不错' : '还可以'}。它${Math.random() > 0.5 ? '操作简单' : '功能实用'}，${Math.random() > 0.5 ? '很适合日常使用' : '能满足基本需求'}。\n`;
    } else if (style === '热情推荐') {
      result += `天哪，${productName}真的太好用了！我已经用了${Math.floor(Math.random() * 10) + 1}天了，每天都离不开它！它${Math.random() > 0.5 ? '效果显著' : '功能强大'}，完全超出了我的预期！\n`;
    } else if (style === '简洁明了') {
      result += `${productName}使用体验${rating >= 4 ? '很好' : '一般'}，符合预期。\n`;
    }

    // 使用场景
    result += `\n【适用场景】\n`;
    if (usageScenario) {
      result += usageScenario + '\n';
    } else {
      if (productType.includes('手机') || productType.includes('数码')) {
        result += `这款${productName}非常适合${Math.random() > 0.5 ? '日常使用' : '工作学习'}，无论是${Math.random() > 0.5 ? '看视频、玩游戏' : '办公、社交'}都能轻松应对。\n`;
      } else if (productType.includes('服装') || productType.includes('鞋包')) {
        result += `${productName}适合${Math.random() > 0.5 ? '日常穿搭' : '各种场合'}，无论是${Math.random() > 0.5 ? '上班、约会' : '逛街、旅行'}都很合适。\n`;
      } else if (productType.includes('美妆') || productType.includes('护肤')) {
        result += `这款产品适合${Math.random() > 0.5 ? '日常护肤/化妆' : '特殊场合'}使用，无论是${Math.random() > 0.5 ? '日常出门' : '参加派对'}都能让你光彩照人。\n`;
      } else {
        result += `${productName}适合${Math.random() > 0.5 ? '家庭使用' : '个人使用'}，无论是${Math.random() > 0.5 ? '日常家居' : '办公'}都能派上用场。\n`;
      }
    }

    // 优点
    result += `\n【产品优点】\n`;
    if (pros) {
      const prosList = pros.split('\n').filter(p => p.trim());
      prosList.forEach((pro, index) => {
        result += `👍 ${index + 1}. ${pro}\n`;
      });
    } else {
      if (rating >= 4) {
        result += `👍 1. ${Math.random() > 0.5 ? '质量可靠' : '性能出色'}\n`;
        result += `👍 2. ${Math.random() > 0.5 ? '设计合理' : '使用便捷'}\n`;
        result += `👍 3. ${Math.random() > 0.5 ? '性价比高' : '物超所值'}\n`;
        result += `👍 4. ${Math.random() > 0.5 ? '做工精细' : '材质优良'}\n`;
      } else {
        result += `👍 1. ${Math.random() > 0.5 ? '价格实惠' : '功能实用'}\n`;
        result += `👍 2. ${Math.random() > 0.5 ? '外观不错' : '使用简单'}\n`;
      }
    }

    // 缺点（如果评分低于5分）
    if (rating < 5) {
      result += `\n【小小不足】\n`;
      if (cons) {
        const consList = cons.split('\n').filter(c => c.trim());
        consList.forEach((con, index) => {
          result += `👎 ${index + 1}. ${con}\n`;
        });
      } else {
        if (rating >= 4) {
          result += `👎 1. ${Math.random() > 0.5 ? '包装可以再改进一下' : '价格略高了一点'}\n`;
        } else {
          result += `👎 1. ${Math.random() > 0.5 ? '质量一般' : '做工有待提高'}\n`;
          result += `👎 2. ${Math.random() > 0.5 ? '使用体验不如预期' : '性价比一般'}\n`;
        }
      }
    }

    // 总结与推荐
    result += `\n【总结与推荐】\n`;
    if (rating >= 4.5) {
      result += `💯 ${style === '热情推荐' ? '强烈推荐！' : '非常推荐！'} ${productName}是一款${Math.random() > 0.5 ? '性价比极高' : '非常优秀'}的产品，值得购买！\n`;
    } else if (rating >= 3.5) {
      result += `👍 ${style === '热情推荐' ? '推荐购买！' : '可以购买。'} ${productName}整体表现${Math.random() > 0.5 ? '不错' : '符合预期'}，虽然有一些小缺点，但不影响使用体验。\n`;
    } else {
      result += `🤔 ${style === '真实客观' ? '可以考虑购买。' : '建议谨慎购买。'} ${productName}有一定的优点，但也存在一些不足，建议根据个人需求进行选择。\n`;
    }

    // 结尾
    result += `\n【结尾】\n`;
    if (style === '真实客观') {
      result += `以上是我对${productName}的真实评价，希望能对大家有所帮助。\n`;
    } else if (style === '热情推荐') {
      result += `总之，${productName}是我近期购买的最满意的产品之一，强烈推荐给大家！\n`;
    } else if (style === '简洁明了') {
      result += `满意/一般/不满意，${Math.random() > 0.5 ? '会再次购买' : '不打算回购'}。\n`;
    }

    // 用户信息（模拟）
    const userNames = ['阳光明媚', '数码爱好者', '时尚达人', '生活家', '品质控', '性价比追求者'];
    const randomUserName = userNames[Math.floor(Math.random() * userNames.length)];
    const purchaseDates = ['2023-11-15', '2023-11-10', '2023-11-05', '2023-10-28', '2023-10-20'];
    const randomPurchaseDate = purchaseDates[Math.floor(Math.random() * purchaseDates.length)];
    result += `\n—— ${randomUserName} (购买日期：${randomPurchaseDate})`;

    return result;
  };

  // 处理表单提交
  const handleSubmit = async (values: any) => {
    try {
      setIsGenerating(true);
      const { productName, productType, rating, purchaseExperience, pros, cons, usageScenario, style } = values;

      // 模拟API请求延迟
      await new Promise(resolve => setTimeout(resolve, 1500));

      const generated = generateContent(productName, productType, rating, purchaseExperience, pros, cons, usageScenario, style);
      setGeneratedContent(generated);
      message.success('商品评价生成成功！');
    } catch (error) {
      message.error('生成失败，请稍后重试');
    } finally {
      setIsGenerating(false);
    }
  };

  // 复制生成的内容
  const handleCopy = () => {
    navigator.clipboard.writeText(generatedContent).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  // 下载生成的内容
  const handleDownload = () => {
    const blob = new Blob([generatedContent], { type: 'text/plain;charset=utf-8' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = '商品评价.txt';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(link.href);
    message.success('文件下载成功');
  };

  // 产品类型选项
  const productTypeOptions = [
    { label: '手机/数码产品', value: '手机/数码产品' },
    { label: '服装/鞋包', value: '服装/鞋包' },
    { label: '美妆/护肤产品', value: '美妆/护肤产品' },
    { label: '家居用品', value: '家居用品' },
    { label: '食品饮料', value: '食品饮料' },
    { label: '母婴用品', value: '母婴用品' },
    { label: '图书文具', value: '图书文具' },
    { label: '运动户外', value: '运动户外' },
    { label: '其他', value: '其他' },
  ];

  // 评价风格选项
  const styleOptions = [
    { label: '真实客观', value: '真实客观' },
    { label: '热情推荐', value: '热情推荐' },
    { label: '简洁明了', value: '简洁明了' },
  ];

  return (
    <>
      <div style={{ padding: '24px' }}>
        <Title level={2} style={{ display: 'flex', alignItems: 'center' }}>
          商品评价生成
          <TourGuideButton onClick={showTour} />
        </Title>
        <Card style={{ marginBottom: '24px' }}>
          <Form
            form={form}
            layout="vertical"
            onFinish={handleSubmit}
            initialValues={{
              productType: '手机/数码产品',
              rating: 5,
              style: '真实客观',
            }}
          >
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Form.Item
                  name="productName"
                  label="产品名称"
                  rules={[{ required: true, message: '请输入产品名称' }]}
                >
                  <div ref={productNameRef}>
                    <Input placeholder="请输入产品名称" />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="productType"
                  label="产品类型"
                  rules={[{ required: true, message: '请选择产品类型' }]}
                >
                  <div ref={productTypeRef}>
                    <Select placeholder="请选择产品类型" options={productTypeOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="rating"
                  label="星级评分"
                  rules={[{ required: true, message: '请选择星级评分' }]}
                >
                  <div ref={ratingRef}>
                    <Rate allowHalf defaultValue={5} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="style"
                  label="评价风格"
                  rules={[{ required: true, message: '请选择评价风格' }]}
                >
                  <div ref={styleRef}>
                    <Select placeholder="请选择评价风格" options={styleOptions} />
                  </div>
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="purchaseExperience"
                  label="购买体验（可选）"
                >
                  <TextArea rows={2} placeholder="请输入购买体验，如物流速度、包装等，如不填写将自动生成" />
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item
                  name="usageScenario"
                  label="适用场景（可选）"
                >
                  <TextArea rows={2} placeholder="请输入产品的适用场景，如不填写将自动生成" />
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="pros"
                  label="产品优点（可选）"
                >
                  <TextArea rows={3} placeholder="请输入产品的优点，每行一个，如不填写将自动生成" />
                </Form.Item>
              </Col>
              <Col xs={24} md={12}>
                <Form.Item
                  name="cons"
                  label="产品不足（可选）"
                >
                  <TextArea rows={3} placeholder="请输入产品的不足，每行一个，如不填写将自动生成" />
                </Form.Item>
              </Col>
              <Col xs={24}>
                <Form.Item>
                  <div ref={generateButtonRef}>
                    <Button type="primary" htmlType="submit" loading={isGenerating} style={{ width: '100%' }}>
                      {isGenerating ? <Spin /> : '生成商品评价'}
                    </Button>
                  </div>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Card>

        {generatedContent && (
          <Card title="生成结果" extra={
            <div style={{ display: 'flex', gap: '8px' }}>
              <Button icon={<CopyOutlined />} onClick={handleCopy}>复制</Button>
              <Button icon={<DownloadOutlined />} onClick={handleDownload}>下载</Button>
            </div>
          }>
            <div ref={resultRef} style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: 1.6 }}>
              {generatedContent}
            </div>
          </Card>
        )}
      </div>

      <CommonTour
        open={tourVisible}
        steps={tourSteps}
        targetRefs={tourRefs}
        onClose={() => setTourVisible(false)}
      />
    </>
  );
}